import { PageContainer } from '@ant-design/pro-layout';
import { useLocation } from 'umi';
import { Card, Col, Descriptions, Row, Statistic } from 'antd';
import 'moment/locale/zh-cn'
import React, { useEffect, useState } from 'react';
import BarCharts from './component/barCharts';
import './index.less';
import { getDetail } from '@/services/statistics';

const Index: React.FC = (props) => {
  const location = useLocation();

  const [statisticsData, setStatisticsData] = useState<any>({});

  useEffect(() => {
    getData();
  }, []);
  //获取统计数据
  const getData = async () => {
    const res = await getDetail({});
    setStatisticsData(res.data);
  };
  //统计人数
  const statistPeople = () => {
    return (
      <Row gutter={16}>
        <Col span={6}>
          <Card bordered={false}>
            <Statistic title="在线人数" value={statisticsData.onlineNums} />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false}>
            <Statistic title="今日访问人数" value={statisticsData.dayNums} />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false}>
            <Statistic title="本周访问人数" value={statisticsData.weekNums} />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false}>
            <Statistic title="今日并发量" value={((0.8*(statisticsData.dayNums))/(24*60*60*0.4)).toFixed(0)} />
          </Card>
        </Col>
      </Row>
    );
  };

  //网站统计概要
  const webContent = () => {
    return (
      <div className="webContent">
        <Descriptions
          title={<span style={{ marginLeft: 10 }}>网站统计概要</span>}
          bordered
          column={2}
          labelStyle={{ textAlign: 'right', fontWeight: 600 }}
        >
          <Descriptions.Item label="访问总人数：">{statisticsData.totalNums}</Descriptions.Item>
          <Descriptions.Item label="统计天数：">{statisticsData.totalDays}</Descriptions.Item>
          <Descriptions.Item label="今日访问人数：">{statisticsData.dayNums}</Descriptions.Item>
          <Descriptions.Item label="日平均访问人数：">
            {statisticsData.avgDayNums}
          </Descriptions.Item>

          <Descriptions.Item label="本周访问人数：">{statisticsData.weekNums}</Descriptions.Item>
          <Descriptions.Item label="周平均访问人数：">
            {statisticsData.avgWeekNums}
          </Descriptions.Item>
          <Descriptions.Item label="本月访问人数：">{statisticsData.monthNums}</Descriptions.Item>
          <Descriptions.Item label="月平均访问人数：">
            {statisticsData.avgMonthNums}
          </Descriptions.Item>
        </Descriptions>
      </div>
    );
  };

  //统计图表
  const statistCharts = () => {
    return (
      <Row gutter={16}>
        <Col span={12}>
          <Card title="日统计报表">
            <BarCharts dataSource={statisticsData.dayCount} />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="周统计报表">
            <BarCharts dataSource={statisticsData.weekCount} />
          </Card>
        </Col>
      </Row>
    );
  };
  return (
    <PageContainer header={{ title: false }}>
      <Row gutter={[16, 24]}>
        <Col span={24}>{statistPeople()}</Col>
        <Col span={24}>{webContent()}</Col>
        <Col span={24}>{statistCharts()}</Col>
      </Row>
    </PageContainer>
  );
};

export default Index;
